// 原内联脚本的内容
function initChart() {
    // 验证echarts和echarts-gl是否加载成功
    console.log("echarts是否加载：", typeof echarts !== "undefined");
    // console.log("echarts-gl是否加载：", typeof echarts.gl !== "undefined");

    // 获取容器
    const container = document.getElementById("chart-container");
    // 初始化echarts实例
    const chart = echarts.init(container);

    // 3D散点图配置
    // const option = {
    //     xAxis: {
    //         type: 'category',
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             data: [150, 230, 224, 218, 135, 147, 260],
    //             type: 'line'
    //         }
    //     ]
    // };

    const pieData = [
        { name: '直接访问', value: 335 },
        { name: '邮件营销', value: 310 },
        { name: '联盟广告', value: 234 },
        { name: '视频广告', value: 135 },
        { name: '搜索引擎', value: 1548 }
    ];
    // 计算总值
    const total = pieData.reduce((sum, item) => sum + item.value, 0);

    const totalValue = pieData.reduce((acc, item) => acc + item.value, 0);//计算数据累加和
    const colorList = ['#38dff1', '#ff960d', '#fff121', '#83ff3a']

    const calcValue = (value, toFix) => {
        const num = Number(value);
        // 非数字返回'-'，否则保留指定小数位数
        return isNaN(num) ? '-' : num.toFixed(toFix);
    };

    // 3. 存储所有3D扇区的series配置
    const seriesList = pieData.map((item, index) => {
        // 3.1 基础系列配置（surface类型实现3D扇区）
        const seriesItem = {
            name: item.name || `未命名扇区${index + 1}`,// 扇区名称（默认兜底）
            type: 'surface',// 3D曲面类型（核心）
            parametric: true,// 开启参数化模式（用于生成自定义曲面）
            wireframe: {//网格线
                show: false//隐藏（避免影响3D视觉）
            },
            pieData: item,// 挂载原始扇区数据（后续交互用）
            // 扇区状态（选中/悬停/环形比例，初始默认值）
            pieStatus: {
                isSelected: false,//选中
                isHovered: false,//悬停
                isUnifyHeight: false,//isUnifyHeight,
                ringRatio: false,//ringRatio//环形比例
            },
            // 注意：surface类型系列不支持center控制位置，3D位置由grid3D.top/left控制
            // center: ['10%', '50%'] //更改圆环位置失效
        }

        // 3.2 处理扇区自定义样式（优先级：sectorData.itemStyle > 默认值）
        seriesItem.itemStyle = {
            color: colorList[index%colorList.length-1], // 默认颜色
            opacity: 1,  // 默认透明度（使用用户传入的opacity参数）
            ...item.itemStyle
        };

        return seriesItem
    })

    const legendData =seriesList.map(item=>{
        const { pieData} = item;
        const ratio = calcValue(pieData.value / totalValue, 4);
        return {
            name:item.name,
            value:ratio
        }
    })

    const option = {
        // 图例组件配置
        legend: {// 图例组件配置
            show: true,
            data: legendData,
            orient: 'vertical',// 垂直排列
            right: 10,// 右对齐
            top: 30,// 顶部偏移
            itemGap: 30,// 图例项间距
            itemHeight: 5,// 图例标记高度
            itemWidth: 5,// 图例标记宽度
            textStyle: {// 文字样式
                color: '#d4d6d9',
                fontSize: 14
            },
            icon: 'roundRect',// 图例标记形状（圆角矩形）
            formatter: (legendName) =>  {// 图例格式化（显示名称+百分比）
                const item = legendData.find(item => item.name === legendName)
                const percentage = calcValue(item.value * 100, 2)
                return `${legendName}  ${percentage}%`
            }
        },
        labelLine: {
            show: true,
            lineStyle: {
                color: '#fff'
            }
        },
        label: {
            show: true,
            position: 'outside',// 标签在扇区外侧
            formatter: '{b} \n{c} {d}%'// 标签内容：名称+数值+百分比
        },
        tooltip: {
            backgroundColor: '#033b77',// 提示框背景
            borderColor: '#21f2c4',// 提示框边框
            textStyle: {// 提示框文字
                color: '#fff',
                fontSize: 13
            },
            formatter: (params) => {// 提示框内容格式化（显示名称+占比）
                // 排除无效系列（如辅助线系列）
                if (params.seriesName === 'mouseoutSeries' || params.seriesName === 'pie2d') {
                    return '';
                }

                const targetItem = seriesList[params.seriesIndex];
                const percentage = calcValue((targetItem.pieData.endRatio - targetItem.pieData.startRatio) * 100,2 );
                return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span> ${percentage}%`;
            }
        },
        // 3D坐标轴配置（固定范围，避免显示异常）
        xAxis3D: { min: -1, max: 1 },
        yAxis3D: { min: -1, max: 1 },
        zAxis3D: { min: -1, max: 1 },
        // 三维直角坐标系组件配置
        grid3D: {
            show: true,// 隐藏3D网格（仅用其控制位置和大小）
            top: 20,//gridTop,// 3D区域顶部偏移（用户可配置）
            left: 30,//gridLeft,// 3D区域左侧偏移（用户可配置）
            boxHeight: 40,//boxHeight, // 3D盒子高度（控制扇区立体高度）
            viewControl: {
                // 3d效果可以放大、旋转等，请自己去查看官方配置
                alpha:45,//alpha, // 角度
                distance:200,//distance, // 调整视角到主体的距离，类似调整zoom
                rotateSensitivity: 1, // 旋转灵敏度（0=不可旋转）
                zoomSensitivity: 0, // 缩放灵敏度（0=不可缩放）
                panSensitivity: 0, // 平移灵敏度（0=不可平移）
                autoRotate: true // 自动旋转
            }
        },
        // 系列列表配置
        series: [
            {
                name: '3D Pie', // 系列名称
                // type: 'pie', // 系列类型，这里注释掉了因为我们要用'surface'来代替
                radius: ['40%', '70%'], // 饼图的内半径和外半径，这里设置为百分比，相对于容器高宽中较小的一个值的一半
                center: ['50%', '50%'], // 饼图的中心位置，这里设置为相对于容器的百分比
                data: pieData.map(item => ({ // 数据项数组
                    name: item.name, // 数据项的名字
                    value: item.value, // 数据项的值
                    startAngle: (item.value / total) * 360, // 起始角度，这里计算了一个假的起始角度，实际上ECharts会自动计算
                    endAngle: ((item.value + 1) / total) * 360 // 结束角度，这里也计算了一个假的结束角度
                })),
                itemStyle: {
                    color: function (params) { // 数据图形的颜色，这里使用了一个颜色数组并根据数据索引返回不同的颜色
                        const colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];
                        return colors[params.dataIndex];
                    }
                },
                label: {
                    show: true, // 是否显示标签
                    position: 'inside', // 标签的位置，这里设置为内部
                    formatter: '{b}\n{d}%' // 标签内容格式化器，这里显示数据项名字和百分比
                },
                labelLine: {
                    show: true // 是否显示标签引导线
                },
                // 使用 surface 类型来创建3D效果
                type: 'surface', // 系列类型，这里设置为3D表面
                parametric: true, // 是否开启参数方程模式
                wireframe: {
                    show: false // 是否显示线框
                },
                parametricEquation: { // 参数方程配置，用于生成3D表面
                    u: {
                        min: 0, // 参数u的最小值
                        max: Math.PI * 2, // 参数u的最大值
                        step: Math.PI / 20 // 参数u的步长
                    },
                    v: {
                        min: 0, // 参数v的最小值
                        max: Math.PI * 2, // 参数v的最大值
                        step: Math.PI / 20 // 参数v的步长
                    },
                    x: function (u, v) { // x轴的参数方程
                        return Math.cos(u) * Math.sin(v);
                    },
                    y: function (u, v) { // y轴的参数方程
                        return Math.sin(u) * Math.sin(v);
                    },
                    z: function (u, v) { // z轴的参数方程
                        return Math.cos(v);
                    }
                }
            }
        ]
    };

    chart.setOption(option);
}

// 页面加载完成后初始化图表
// window.onload = initChart;

function checkWebGLInExtension() {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (!gl) {
        console.error('扩展环境中WebGL不可用！');
        return false;
    }
    console.log('扩展环境中WebGL可用，版本：', gl.getParameter(gl.VERSION));
    return true;
}

// 在initChart前调用
window.onload = () => {
    if (checkWebGLInExtension()) {
        initChart();
    }
};